import React, { useState, useEffect } from 'react';
import { 
  ExclamationTriangleIcon, 
  CurrencyYenIcon, 
  ClockIcon,
  DocumentTextIcon
} from '@heroicons/react/24/outline';
import { PenaltyRule } from '../shared/types';

const PenaltyRules = () => {
  const [rules, setRules] = useState<PenaltyRule[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedCategory, setSelectedCategory] = useState<'all' | 'equipment' | 'venue' | 'behavior' | 'other'>('all');

  // 模拟罚款条例数据
  useEffect(() => {
    const mockRules: PenaltyRule[] = [
      {
        id: '1',
        title: '器材损坏赔偿',
        description: '因个人原因导致健身器材损坏，需按器材价值进行赔偿。轻微损坏扣除相应保证金，严重损坏需全额赔偿并承担维修费用。',
        penaltyAmount: 100,
        penaltyPoints: 10,
        category: 'equipment',
        isActive: true,
        createdAt: new Date('2024-01-01'),
        updatedAt: new Date('2024-09-01')
      },
      {
        id: '2',
        title: '器材未归还原位',
        description: '使用完毕后未将器材归还至指定位置，影响他人使用和场馆整洁。',
        penaltyAmount: 20,
        penaltyPoints: 2,
        category: 'equipment',
        isActive: true,
        createdAt: new Date('2024-01-01'),
        updatedAt: new Date('2024-09-01')
      },
      {
        id: '3',
        title: '场地预约爽约',
        description: '预约场地后无故不到场使用，且未提前24小时取消预约，浪费场地资源。',
        penaltyAmount: 50,
        penaltyPoints: 5,
        category: 'venue',
        isActive: true,
        createdAt: new Date('2024-01-01'),
        updatedAt: new Date('2024-09-01')
      },
      {
        id: '4',
        title: '超时使用场地',
        description: '超出预约时间继续使用场地，影响后续用户的正常使用。',
        penaltyAmount: 30,
        penaltyPoints: 3,
        category: 'venue',
        isActive: true,
        createdAt: new Date('2024-01-01'),
        updatedAt: new Date('2024-09-01')
      },
      {
        id: '5',
        title: '在健身房内吸烟',
        description: '在健身房内吸烟，严重影响空气质量和他人健康，违反场馆规定。',
        penaltyAmount: 200,
        penaltyPoints: 20,
        category: 'behavior',
        isActive: true,
        createdAt: new Date('2024-01-01'),
        updatedAt: new Date('2024-09-01')
      },
      {
        id: '6',
        title: '大声喧哗或播放音乐',
        description: '在健身房内大声喧哗、播放音乐或进行其他影响他人锻炼的行为。',
        penaltyAmount: 30,
        penaltyPoints: 3,
        category: 'behavior',
        isActive: true,
        createdAt: new Date('2024-01-01'),
        updatedAt: new Date('2024-09-01')
      },
      {
        id: '7',
        title: '未按规定着装',
        description: '未穿运动服装和运动鞋进入健身房，或着装不符合健身房要求。',
        penaltyAmount: 20,
        penaltyPoints: 2,
        category: 'behavior',
        isActive: true,
        createdAt: new Date('2024-01-01'),
        updatedAt: new Date('2024-09-01')
      },
      {
        id: '8',
        title: '恶意破坏公物',
        description: '故意破坏健身房设施、涂鸦或进行其他破坏行为。',
        penaltyAmount: 500,
        penaltyPoints: 50,
        category: 'other',
        isActive: true,
        createdAt: new Date('2024-01-01'),
        updatedAt: new Date('2024-09-01')
      },
      {
        id: '9',
        title: '盗用他人账号',
        description: '使用他人账号预约场地或借用器材，违反实名制使用规定。',
        penaltyAmount: 100,
        penaltyPoints: 15,
        category: 'other',
        isActive: true,
        createdAt: new Date('2024-01-01'),
        updatedAt: new Date('2024-09-01')
      }
    ];
    
    setTimeout(() => {
      setRules(mockRules);
      setIsLoading(false);
    }, 1000);
  }, []);

  const filteredRules = rules.filter(rule => 
    selectedCategory === 'all' || rule.category === selectedCategory
  );

  const getCategoryText = (category: string) => {
    switch (category) {
      case 'equipment': return '器材相关';
      case 'venue': return '场地相关';
      case 'behavior': return '行为规范';
      case 'other': return '其他';
      default: return '未知';
    }
  };

  const getCategoryColor = (category: string) => {
    switch (category) {
      case 'equipment': return 'bg-blue-100 text-blue-800';
      case 'venue': return 'bg-green-100 text-green-800';
      case 'behavior': return 'bg-yellow-100 text-yellow-800';
      case 'other': return 'bg-purple-100 text-purple-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getSeverityColor = (points: number) => {
    if (points >= 20) return 'text-red-600';
    if (points >= 10) return 'text-orange-600';
    if (points >= 5) return 'text-yellow-600';
    return 'text-green-600';
  };

  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-8">
      {/* 页面标题 */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-4">
          <ExclamationTriangleIcon className="w-8 h-8 text-orange-600" />
          <h1 className="text-3xl font-bold text-gray-900">馆内设施罚款条例</h1>
        </div>
        <p className="text-gray-600">
          为维护健身房良好的使用环境和秩序，保障所有用户的权益，特制定以下罚款条例。
          请所有用户严格遵守，共同维护良好的健身环境。
        </p>
      </div>

      {/* 重要提示 */}
      <div className="bg-orange-50 border-l-4 border-orange-400 p-4 mb-6">
        <div className="flex">
          <div className="flex-shrink-0">
            <ExclamationTriangleIcon className="h-5 w-5 text-orange-400" />
          </div>
          <div className="ml-3">
            <h3 className="text-sm font-medium text-orange-800">重要提示</h3>
            <div className="mt-2 text-sm text-orange-700">
              <ul className="list-disc list-inside space-y-1">
                <li>累计扣分达到100分将被暂停使用权限1个月</li>
                <li>累计扣分达到200分将被永久取消使用资格</li>
                <li>所有罚款将用于健身房设施维护和改善</li>
                <li>对罚款有异议可在7天内提出申诉</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* 分类筛选 */}
      <div className="bg-white rounded-lg shadow-sm border p-6 mb-6">
        <h3 className="text-lg font-medium text-gray-900 mb-4">按类别筛选</h3>
        <div className="flex flex-wrap gap-2">
          {[
            { key: 'all', label: '全部' },
            { key: 'equipment', label: '器材相关' },
            { key: 'venue', label: '场地相关' },
            { key: 'behavior', label: '行为规范' },
            { key: 'other', label: '其他' }
          ].map(({ key, label }) => (
            <button
              key={key}
              onClick={() => setSelectedCategory(key as any)}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                selectedCategory === key
                  ? 'bg-primary text-white'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              {label}
            </button>
          ))}
        </div>
      </div>

      {/* 罚款条例列表 */}
      <div className="space-y-4">
        {filteredRules.map((rule) => (
          <div key={rule.id} className="bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow">
            <div className="p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <h3 className="text-lg font-semibold text-gray-900">{rule.title}</h3>
                    <span className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${getCategoryColor(rule.category)}`}>
                      {getCategoryText(rule.category)}
                    </span>
                  </div>
                  <p className="text-gray-600 leading-relaxed">{rule.description}</p>
                </div>
              </div>
              
              <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                <div className="flex items-center gap-6">
                  <div className="flex items-center gap-2">
                    <CurrencyYenIcon className="w-5 h-5 text-red-600" />
                    <span className="text-sm text-gray-600">罚款金额:</span>
                    <span className="font-semibold text-red-600">¥{rule.penaltyAmount}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <ExclamationTriangleIcon className="w-5 h-5 text-orange-600" />
                    <span className="text-sm text-gray-600">扣除积分:</span>
                    <span className={`font-semibold ${getSeverityColor(rule.penaltyPoints)}`}>
                      {rule.penaltyPoints}分
                    </span>
                  </div>
                </div>
                <div className="flex items-center gap-2 text-sm text-gray-500">
                  <ClockIcon className="w-4 h-4" />
                  <span>更新于 {new Date(rule.updatedAt).toLocaleDateString('zh-CN')}</span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {filteredRules.length === 0 && (
        <div className="text-center py-12">
          <DocumentTextIcon className="mx-auto h-12 w-12 text-gray-400" />
          <h3 className="mt-2 text-sm font-medium text-gray-900">没有找到相关条例</h3>
          <p className="mt-1 text-sm text-gray-500">尝试选择其他分类查看</p>
        </div>
      )}

      {/* 底部说明 */}
      <div className="mt-8 bg-gray-50 rounded-lg p-6">
        <h3 className="text-lg font-medium text-gray-900 mb-4">申诉流程</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="flex items-start gap-3">
            <div className="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold">
              1
            </div>
            <div>
              <h4 className="font-medium text-gray-900">提交申诉</h4>
              <p className="text-sm text-gray-600">在收到罚款通知后7天内，可通过系统提交申诉申请</p>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <div className="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold">
              2
            </div>
            <div>
              <h4 className="font-medium text-gray-900">审核处理</h4>
              <p className="text-sm text-gray-600">管理员将在3个工作日内审核申诉材料并给出处理结果</p>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <div className="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold">
              3
            </div>
            <div>
              <h4 className="font-medium text-gray-900">结果通知</h4>
              <p className="text-sm text-gray-600">申诉结果将通过系统消息和邮件形式通知到本人</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PenaltyRules;